<template>
    <div id="titleBar">
        <div className="group" @double-click="max">
            <div class="Button" type="text" @click.prevent="min">
                <span v-iconfont="'#icon-2zuixiaohua-1'"></span>
            </div>
            <div class="Button" type="text" @click.prevent="max">
                <span v-iconfont="isMax ? '#icon-3zuidahua-1' : '#icon-3zuidahua-3'"></span>
            </div>
            <div class="Button" id="closed-btn" type="text" @click.prevent="closed">
                <span v-iconfont="'#icon-4guanbi-2'"></span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
const isMax = ref(false);

const props = defineProps(["isMainWindow"]);

const min = () => {
    window.electronAPI.minApp();
};
const max = () => {
    if (isMax.value) {
        window.electronAPI.unmaxApp();
        isMax.value = false;
    } else {
        window.electronAPI.maxApp();
        isMax.value = true;
    }
};
const closed = () => {
    window.electronAPI.closeApp(props.isMainWindow);
};

const ChangeMaxState = (event, State) => {
    isMax.value = State == "maximize";
};

onMounted(() => {
    window.electronAPI.offChangeMaxState(ChangeMaxState);
});
</script>
<style lang="less" scoped>
#titleBar {
    width: 100%;
    height: 48px;
    position: relative;
    z-index: 100;
    -webkit-app-region: drag;
    /* 设置自定义可拖动区域 */
    user-select: none;

    /* 禁用文本选择 */
    .group {
        display: inline-block;
        height: 48px;
        line-height: 30px;

        position: absolute;
        right: 0px;
        -webkit-app-region: no-drag;

    }

    .Button {
        display: inline-block;
        width: 48px;
        height: 48px;
        text-align: center;
        cursor: pointer;
        line-height: 48px;

        &:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
    }

    #closed-btn:hover {
        font-weight: bold;
        color: #fff;
        background-color: rgba(255, 0, 0, 0.7) !important;
    }

    #closed-btn:active {
        background-color: rgb(155, 5, 5) !important;
    }
}
</style>
